<!-- 
说明：轮播图片
作者：DEDEDE 
日期：2018-6-14 11:21:41 
版本：1.0.0
-->
<template>
  <div class="swpierStyle"
       :style="getStyle()">
    <div class="md-example-child md-example-child-swiper md-example-child-swiper-0"
         @click="clickItem()">
      <md-swiper @before-change="beforeChange"
                 @after-change="afterChange"
                 :has-dots="false"
                 :autoplay="extend.speed"
                 :is-prevent="false"
                 ref="swiper">
        <md-swiper-item :key="$index"
                        style="width:100%;height:100%"
                        v-for="(item, $index) in extend.data">
          <a href="javascript:void(0)"
             class="banner-item"><img :src="getImageUrl(item)"
                 style="width:100%;height:100%"></a>
        </md-swiper-item>
      </md-swiper>
      <div class="swiperDots"
           v-if="extend.showDots">
        <div class="swiperDots-dots"
             v-for="(item,index) in extend.data"
             :class="{selected: index === currentValue,margin:index === extend.data.length-1}"></div>
      </div>
    </div>
  </div>
</template>

<script>
  import {Swiper, SwiperItem} from 'mand-mobile'
  // import simple from 'mand-mobile/components/swiper/demo/data/simple'
  const ITEMCLICK = 'clickItem'
  export default {
    name: 'cm-ui-img',
    // extends: CmUi,
    components: {
      [Swiper.name]: Swiper,
      [SwiperItem.name]: SwiperItem
    },
    // :extend="{ showDots:true, speed:1*1000, data:dataImgs,pic:'cipath',url:'ciurl' }"></cm-ui-img>
    props: {
      extend: {
        type: Object,
        default () {
          return {
            height: 0,
            width: 0,
            showDots: false,
            speed: 0,
            data: [],
            pic: 'cipath',
            url: 'ciurl'
          }
        }
      }
    },
    data () {
      return {
        title: '轮播图',
        currentValue: 0
      }
    },
    mounted () {
      window.triggerSwiper0 = () => {
        this.goto()
      }
      window.triggerSwiper1 = () => {
        this.play()
      }
      window.triggerSwiper2 = () => {
        this.stop()
      }
    },
    methods: {
      px2rem (px) {
        let rem = 100
        return `${px / rem}rem`
      },
      getStyle () {
        // 设置轮播图的 属性
        return {
          width: this.px2rem(this.extend.width),
          height: this.px2rem(this.extend.height)
        }
      },
      getImageUrl (item) {
        if (this.extend.pic && this.extend.pic.length > 0) {
          return item[this.extend.pic]
        } else {
          return item
        }
      },
      clickItem () {
        let index = this.$refs.swiper.getIndex()
        let url = this.extend.data[index][this.extend.url]
        // console.error(this.extend.data[index])
        if (url.indexOf('http:') === 0 || url.indexOf('https:') === 0) {
          location.href = url
        } else {
          this.$router.push({name: 'article', query: {ciurl: url}})
        }
        this.$emit(ITEMCLICK, index, url)
      },
      // getStylu () {
      //   return {
      //     width: this.px2rem(this.extend.width),
      //     height: this.px2rem(this.extend.height)
      //   }
      // },
      setValue (id, value) {
        document.querySelector(id) && (document.querySelector(id).innerHTML = value)
      },
      beforeChange (from, to) {
        this.setValue('#valueSwiper0', from)
        this.setValue('#valueSwiper1', to)
        this.currentValue = to
      },
      afterChange (from, to) {
        this.setValue('#valueSwiper2', from)
        this.setValue('#valueSwiper3', to)
      },
      fn (index) {
        this.setValue('#valueSwiper4', index)
      },
      goto () {
        this.$refs.swiper.goto(2)
      },
      play () {
        this.$refs.swiper.play()
      },
      stop () {
        this.$refs.swiper.stop()
      }
    }
}
</script>

<style lang="stylus" scoped>
// .test {
// position: absolute;
// z-index: 100;
// top: 0;
// left: 0;
// right: 0;
// bottom: 0;
// }
.md-example-child {
  position: relative;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;

  .banner-item {
    float: left;
    width: 100%;
    height: 100%;
    line-height: 250px;
    text-align: center;
    font-size: 28px;
    color: #FFF;
    box-align: center;
    align-items: center;
    box-pack: center;
    justify-content: center;
    text-decoration-line: none;
  }
}

.swiperDots {
  position: absolute;
  bottom: 0;
  height: 56px;
  display: flex;
  justify-content: center;
  align-items: center;

  .swiperDots-dots {
    width: 30px;
    height: 5px;
    background: rgba(255, 212, 219, 1);
    border-radius: 100px;
    margin-right: 18px;
  }

  .selected {
    background: rgba(233, 77, 103, 1);
  }

  .margin {
    margin-right: 0px;
  }
}
</style>
